<template>
  <a-modal
          :visible="visible"
          :width="500"
          :bodyStyle="{overflow: 'auto'}"
          :title="$t('key.bindMobile')"
          @cancel="() => { $emit('cancel') }"
  >
    <a-form :form="form" layout="vertical">
      <a-row :gutter="48">
        <a-col :md="24" :sm="24">
          <a-form-item :label="$t('key.bindMobile')" :labelCol="{span: 4,offset: 1}" :wrapperCol="{span: 18, offset: 1}">
            <a-input v-decorator="['to',{rules: [
              { required: true , message: $t('key.hintNecessary')},
              { pattern: '^0?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$', message: '请输入正确的手机号'}
            ],}]" />
          </a-form-item>
        </a-col>
        <a-col :md="24" :sm="24">
          <a-form-item :label="$t('key.bindVerifyCode')" :labelCol="{span: 4,offset: 1}" :wrapperCol="{span: 18, offset: 1}">
            <a-input-search v-decorator="['code',{rules: [{ required: true , message: $t('key.hintNecessary')}],}]" @search="onSendCode('email')">
              <a-button slot="enterButton">
                {{ $t('key.bindSendVerifyCode')}}
              </a-button>
            </a-input-search>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div slot="footer" style="text-align: center">
      <a-button @click="submit" type="primary"> {{ $t('key.bindConfirm') }}</a-button>
      <a-button @click="() => { $emit('cancel') }" type="primary"> {{ $t('btn.close') }}</a-button>
    </div>
  </a-modal>
</template>

<script>
  import {DateToString} from '@/utils/common'
  import {mapState} from 'vuex'

  export default {
    props: ['visible'],
    data() {
      return {
        form: this.$form.createForm(this),
      }
    },
    computed: {
      ...mapState({}),
    },
    filters: {},
    created() {
    },
    methods: {
      onSendCode(type) {
        this.form.validateFields(['to'], (err, values) => {
          if (err) {
            return
          }
          const _values = Object.assign({type: 'mobile'}, values);
          this.$api.student['sendBindCode'](_values).then(res => {
            if (res.status == 1) {
              this.$message.success(res.msg)
            } else {
              this.$message.error(res.msg)
            }
          })
        })
      },
      submit() {
        this.form.validateFields((err, values) => {
          if (err) {
            return
          }
          const _values = Object.assign({type: 'mobile'}, values);
          this.$api.student['bindConfirm'](_values).then(res => {
            if (res.status == 1) {
              this.$message.success(res.msg)
              this.$emit('cancel')
              this.$emit('reload')
            } else {
              this.$message.error(res.msg)
            }
          })
        })
      }
    }
  }
</script>

<style>

</style>
